@charset utf-8;

/* This CSS resource incorporates links to font software which is the valuable copyrighted property of Monotype and/or its suppliers. You may not attempt to copy, install, redistribute, convert, modify or reverse engineer this font software. Please contact Monotype with any questions regarding Web Fonts: http://www.fontshop.com */
@font-face{
	font-family:"FetteMitD W03 Regular";
	src:url("/font/DIN1451.eot?#iefix");
	src:url("/font/DIN1451.eot?#iefix") format("eot"),url("/font/DIN1451.woff2") format("woff2"),url("/font/DIN1451.woff") format("woff"),url("/font/DIN1451.ttf") format("truetype");
}

@keyframes blinkmenue { 
   50% { background-color: #000000; } 
}

@media screen, projection
{
	html, body {
		margin: 0;
		padding: 0;
		font-family: 'FetteMitD W03 Regular';
		font-style: normal;
		font-size: 13pt;
		color: #000000;
	}
	ul{
		list-style: none;
		padding: 0;
		margin: 0;
	}
	
	a {
		text-decoration:none;
	}

	input[type=text] {
		font-family: 'FetteMitD W03 Regular';
		width: 50%;
		padding: 5px;
	}
	input[type=submit] {
		font-family: 'FetteMitD W03 Regular';
		background: #333333;
		color: #FFFFFF;
		padding:5px 25px;
		border-radius: 5px;
	}
	input[type=submit]:hover {
		background: #999999;
		color: #FFFFFF;
		cursor: pointer;
	}

	textarea{
		font-family: 'FetteMitD W03 Regular';
		width:98%;
	}
	
	#Hintergrund {
	    width: 100%; 
	    height: 100%; 
	    position: fixed;
	    left: 0px; 
	    top: 0px; 
	    z-index: -1;
	    background-size: 100%;
	}
	
	.BackgroundStretch {
	    width:100%;
	    height:100%;
	}
	
	#Haupt {
		margin: 10px auto;
		width: 1022px;
		height: 776px; 
		border: 1px solid black;
		background-color: #000000;
		z-index: 1;
	}
	
	#Kopf {
		width: 1020px;
		height: 120px;
		border: 1px solid #535353;
		background-color: #000000;
		color: #FFFFFF;
		overflow: hidden;
	}
	
	#Menue {
		width: 1021px;
		height: 46px;
		border: 1px solid #535353;
		background-color: #000000;
		color: #FFFFFF;
		overflow: visible;
	}
	
	.Menuepunkt {
		width: 110.5px;
		height: 46px;
		font-size: 11pt;
		float: left;
		border: 0px solid #535353;
		cursor: pointer;
		text-align: center;
	}
	
	.Menuepunkt a {
		
		top: 0px;
		color: #FFFFFF;
	}
	
	.Menuepunkt .Mod {
		
		top: 0px;
		color: #FF9900;
	}
	
	.Menuepunkt:hover {
		background-color: #767676;
	}

	.Menuepunkt .blink {
		position: relative;
		top: 42px;
	    width: 80px;
	    height: 2px;
	    right: -15px;
	   	animation: blinkmenue 2.5s step-end infinite alternate;
	}

	.blink_text {

    	1.5s blinker step-end infinite alternate animation;
	   1.5s blinker step-end infinite alternate -webkit-animation;
	   1.5s blinker step-end infinite alternate -moz-animation;

    }

    @-moz-keyframes blinker {  
     	0% { opacity: 1.0; }
    	50% { opacity: 0.0; }
    	100% { opacity: 1.0; }
    
    }

    @-webkit-keyframes blinker {  
    	0% { opacity: 1.0; }
    	50% { opacity: 0.0; }
    	100% { opacity: 1.0; }

    }

    @keyframes blinker {  
    	0% { opacity: 1.0; }
    	50% { opacity: 0.0; }
    	100% { opacity: 1.0; }
    }



	#K1 {
		width: 212px;
		height: 120px;
		float: left;
	}

	#K2 {
		width: 594px;
		height: 120px;
		border-left: 1px solid #535353;
		float: left;
	}
	
	#K3 {
		width: 212px;
		height: 120px;
		border-left: 1px solid #535353;
		float: left;
	}	
	
	#clock {
		margin-top: 8px;
		margin-left: 54.5px;
		overflow: visible;
	}
	
	#themearea {
     	width: 100%;
     	position: relative;
         left: -15px;
	}
	
	#Inhalt {
		width: 1020px;
		height: 534px;
		border: 1px solid #535353;
		background-color: #FFFFFF;
		color: #000000;
		overflow-y: auto;
		background-image: url('images/background.png');
	}
	
	#Inhaltbox {
		margin: 15px;
	}
	
	#Fuss1 {
		width: 1020px;
		height: 28px;	
		border: 1px solid #535353;
		background-color: #000000;
		color: #FFFFFF;
		padding-bottom: 3px;
	}
	
	#Fuss2 {
		width: 1020px;
		height: 28px;	
		border: 1px solid #535353;
		background-color: #000000;
		color: #FFFFFF;
		padding-bottom: 3px;
	}
	
	
	#clear {
		clear: both;
		float: none;
	}
	
	.red {
		color: #FF0000;
	}

	.orange {
		color: #FF9900;
	}

	.green {
		color: #00CC00;
	}
	
	#HINWEIS {
		position: relative;
		top: 100px;
		color: #FF0000;
		font-size: 24pt;
		text-align: center;
		
		
	}
	
	#copyright {
		width: 1024px;
		height: 15px; 
		color: #FFFFFF;
		border: 1px solid #535353;
		display: none;
	}
	
	.splitflap {
		margin: 4px auto;
		-webkit-perspective-origin: top center;
		-moz-perspective-origin: top center;
		-ms-perspective-origin: top center;
		perspective-origin: top center;
		-webkit-perspective: 1000px;
		-moz-perspective: 1000px;
		-ms-perspective: 1000px;
		perspective: 1000px;
		}
	.splitflap .char {
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		transform-style: preserve-3d;
		}

	#liveview {
		width: 498px;
		float: left;
		border: 0px solid #000000;
	}

	#liveview img{
		width: 498px;
	}

	#livestatus {
		width: 450px;
		height: 360px;
		float: left;
		margin-left: 25px;
		border: 0px solid #000000;
	}

	#snapshot {
		height: 134px;
		padding: auto;
		padding-top: 8px;
		border: 1px solid #000000;
	}

	#livestatus #button {
		width: 230px;
		height: 25px;
		color: #000000;
		background-color: #888888;
		border: 1px solid #000000;
		padding: auto;
		padding-top: 3px;
		cursor: pointer;
		text-align: center;
	}

	#livestatus #button:hover {
		background-color: #FF9900;
	}

	#snaplist {
		border: 0px solid #000000;
		margin-top: 25px;

	}

	.snap {
		display:block;
		width: 800px;
		background-color: #CCCCCC;
		border: 1px solid #000000;
		margin: 20px auto;
		overflow: hidden;
	}
	
	.snap:hover {
		background-color: #FF9900;
	}
	
	.snap .thumb {
		display:block;
		width:220px;
		padding:20px;
		float:left;
	}
	.snap .info {
		display:block;
		width:540px;
		float:left;
	}
	.snap .title {
		position: relative;
		font-size: 18pt;
		text-shadow: 2px 2px #BBBBBB;
	}
	
	.snap .info {
		position: relative;
		font-size: 13pt;
	}
	
	.snap .comment {
		position: relative;
		font-size: 13pt;
	}
	
	.selectbox1 {
		width: 450px;
		height: 77px;
		background-color: #888888;
		border: 1px solid #000000;
		cursor: pointer;
		margin: auto;
		margin-top: 60px;
		-moz-box-shadow:    3px 3px 5px 6px #CCCCCC;
		-webkit-box-shadow: 3px 3px 5px 6px #CCCCCC;
		box-shadow:         3px 3px 5px 6px #CCCCCC;
	}
	
	.selectbox1:hover {
		background-color: #FF9900;
	}
	
	.selectbox1 .symbol {
		position: relative;
		top: 1px;
		left: 1px;
	}
	
	.selectbox1 .info {
		position: relative;
		width: 350px;
		top: -55px;
		left: 90px;
		font-size: 18pt;
	}
	
	.album {
		width: 650px;
		height: 100px;
		background-color: #888888;
		border: 1px solid #000000;
		cursor: pointer;
		margin: 20px auto;
		-moz-box-shadow:    3px 3px 5px 6px #CCCCCC;
		-webkit-box-shadow: 3px 3px 5px 6px #CCCCCC;
		box-shadow:         3px 3px 5px 6px #CCCCCC;
	}
	
	.album:hover {
		background-color: #FF9900;
	}
	
	.album .thumb {
		position: relative;
		top: 5px;
		left: 5px;
		float: left;
	}
	
	.album .title {
		position: relative;
		top: 8px;
		left: 20px;
		font-size: 18pt;
		text-shadow: 2px 2px #BBBBBB;
	}
	
	.album .info {
		position: relative;
		top: 20px;
		left: 20px;
		font-size: 13pt;
	}
	
	.album .info2 {
		position: relative;
		top: 20px;
		left: 20px;
		font-size: 13pt;
	}
	
	.album_menue {
		
		width: 400px;
		border: 1px solid;
	}
	
	.album_menue .schalter {
		width: 24px;
		height: 24px;
		float: right;
		margin-left: 10px;
	}
	
	.album_menue .schalter:hover {
		background-color: #FF9900;
	}
	
	#stats {
	  margin-left: 50px;
	}

	.circle-container {
	  display: block;
	  float: left;
	  margin-right: 60px;
	  margin-bottom: 45px;
	}

	.circle-container h3 {
	  display: block;
	  text-align: center;
	  font-size: 23.6pt;
	  line-height: 1.4em;
	  color: #363636;
	  text-shadow: 1px 1px 0 #FFFFFF;
	}	
	
	.circliful {
		position: relative; 
	}

	.circle-text, .circle-info, .circle-text-half, .circle-info-half {
		width: 100%;
		position: absolute;
		text-align: center;
		display: inline-block;
	}

	.circle-info, .circle-info-half {
		color: #999999;
	}

	.circliful .fa {
		margin: -10px 3px 0 3px;
		position: relative;
		bottom: 4px;
	}
	
	.greybox {
		width: 480px;
		background-color: #EEEEEE; 
		padding: 5px;
		margin-bottom: 10px;
	}
	
	.leftbox {
		width: 470px;
		float: left;
	}
	
	.rightbox {
		width: 470px;
		float: right;
		margin-right: 10px;
	}
	
	.errormsg {
		width: 480px;
		background-color: #F8E0E0;
		color: #FF0000;
		border: 1px solid #FF0000;
		padding:5px;
		text-align: center;
		display: block;
		margin-bottom: 10px;
	}

	.errormsg2 {
		width: 60%;
		background-color: #F8E0E0;
		color: #FF0000;
		border: 1px solid #FF0000;

	}

	form .counter {
		position: relative;
		right: 15px;
  		float: right;
	}
	form .warning{color:#FF0000;}
	form .exceeded{color:#FF0000;}


	
	}

	#sidebar {
		width: 208px;
		height: 445px;
		border: 1px solid #000000;
		background-color: #EEEEEE;
		float: right;
		-moz-box-shadow:    3px 3px 5px 6px #CCCCCC;
		-webkit-box-shadow: 3px 3px 5px 6px #CCCCCC;
		box-shadow:         3px 3px 5px 6px #CCCCCC;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 10px;
	}

	#sidebar_tools {
		width: 228px;
		height: 45px;
		border: 1px solid #000000;
		background-color: #EEEEEE;
		float: right;
		-moz-box-shadow:    3px 3px 5px 6px #CCCCCC;
		-webkit-box-shadow: 3px 3px 5px 6px #CCCCCC;
		box-shadow:         3px 3px 5px 6px #CCCCCC;
		padding-top: 5px;
		margin-top: 2px;
		text-align: center;

	}

}

.sucheBox {
	display: block;
	background: #333;
	padding:15px;
	margin-bottom:10px;
	border-radius: 5px;
	color:#FFF;
}

{
    scrollbar-width: 6px; /* Für Firefox */
    scrollbar-color: #000000, #FF9900; /* Für Firefox */
}

/* Für Chrome, Edge und Safari */
::-webkit-scrollbar {
    width:6px; /* Breite der gesamten Scrollbar */
}

::-webkit-scrollbar-track {
    background: #000000; /* Hintergrund der Scroll-Leiste */
}

::-webkit-scrollbar-thumb {
    background: #FF9900; /* Farbe des Scrollbalkens */
}

::-webkit-scrollbar-thumb:hover {
    background: #FF0000; /* Farbe des Scrollbalkens beim Hover */
}